<template>
  <div class="banner-carousel">
    <div v-if="loading">加载中...</div>
    <div v-if="error" class="error-message">加载失败，请稍后再试。</div>
    <div v-if="banners.length > 0" class="carousel">
      <div class="banner-item" v-for="(banner, index) in banners" :key="index">
        <a :href="banner.link">
          <img :src="banner.image" :alt="banner.title" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'BannerCarousel',
  data() {
    return {
      banners: [],
      loading: true,
      error: null,
    };
  },
  created() {
    this.fetchBanners();
  },
  methods: {
    async fetchBanners() {
      try {
        const response = await axios.get('/api/banner/list');
        if (response.data.code === 200) {
          this.banners = response.data.data;
        } else {
          this.error = '加载数据失败';
        }
      } catch (error) {
        this.error = '请求失败';
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.banner-carousel {
  /* 样式示例 */
  padding: 20px;
  background-color: #f5f5f5;
}
.carousel {
  display: flex;
  overflow: hidden;
}
.banner-item {
  flex: 1;
  margin-right: 10px;
}
.banner-item img {
  width: 100%;
  height: auto;
}
.error-message {
  color: red;
}
</style>
